<template>
  <div v-if="zhuanji" class="zhuanji">
    <div
      class="backbox"
      :style="{ background: `url(${zhuanji.coverImgUrl}) center center` }"
    >
      <div class="zhuanji-info">
        <div class="tishi" @click="$router.go(-1)">返回</div>

        <div style="position: relative" class="imgbox">
          <img :src="zhuanji.coverImgUrl" alt="" class="zhuanjiimg" />
          <div class="zhuanjiicon">歌单</div>
          <span class="redu"
            ><span
              ><img src="../assets/erjiicon.svg" alt="" />{{
                zhuanji?.playCount | formatNumber
              }}
            </span></span
          >
        </div>

        <div class="songxiangxi">
          <p style="margin-bottom: 10px">{{ zhuanji?.name }}</p>

          <div class="uesexinxi">
            <img
              :src="zhuanji?.creator?.avatarUrl"
              alt=""
              class="touxiangimg"
            />
            <div>{{ zhuanji?.creator?.nickname }}</div>
          </div>

          <div
            class="playall"
            @click="$emit('playsonglistall', zhuanji.tracks)"
          >
            <span class="iconfont icon-bofangquanbu"></span> 播放全部
          </div>
        </div>
      </div>
    </div>

    <p
      style="
        padding: 5px 10px;
        background-color: antiquewhite;
        margin-bottom: 10px;
      "
    >
      歌曲列表
    </p>
    <SongList
      v-for="(item, index) in zhuanji.tracks"
      :item="item"
      :idx="index"
      :key="item.id"
      @AudioId="$emit('playAudioId', $event)"
      :AudioplaysongId="AudioplaysongId"
      :playing="playing"
      :songlist="songlist"
      @delsong="$emit('delsong', $event)"
      @addsonglist="$emit('addsonglist', $event)"
    >
    </SongList>
  </div>
</template>

<script>
import SongList from "@/components/SongList.vue";
export default {
  props: {
    AudioplaysongId: Number,
    playing: Boolean,

    songlist: Array,
  },
  components: {
    SongList,
  },
  data() {
    return {
      zhuanji: null,
      song: null,
    };
  },
  created() {
    this.axios
      .get("/playlist/detail", { params: { id: this.$route.query.id } })
      .then((res) => {
        // console.log("获取", res.data.playlist);
        this.zhuanji = res.data.playlist;
      });
  },
};
</script>

<style lang="less" scoped>
.imgbox {
  width: 35vw;
  height: 35vw;
  margin-right: 15px;
  border: 1px solid transparent;
}

.zhuanji {
  width: 100vw;
}

.songxiangxi {
  width: 50vw;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;

  .playall {
    align-self: flex-end;
    width: 30vw;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    color: white;

    top: 10px;
    left: 50%;

    background-color: rgba(255, 255, 255, 0.3);
    /* 半透明背景 */
    backdrop-filter: blur(10px);
    /* 背景模糊效果 */
    -webkit-backdrop-filter: blur(10px);
    /* Safari 兼容性 */

    border: 1px solid;
  }
}

.backbox {
  background-size: 100vw;
}

.zhuanjiicon {
  position: absolute;
  bottom: 10px;
  left: 0;
  font-size: 10px;
  background-color: red;
  padding: 2px 5px;
  opacity: 0.8;
  border-radius: 0 10px 10px 0;
}

.redu {
  position: absolute;
  right: 0;
  top: 0;
  color: aliceblue;
  // font-weight: 700;
  display: flex;
  text-shadow: 2px 2px 4px #000;

  span {
    display: flex;
    align-items: center;
  }

  img {
    width: 18px;
    height: 18px;
  }
}

.tishi {
  width: 90vw;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  text-align: center;
  color: white;

  top: 10px;
  left: 50%;

  background-color: rgba(255, 255, 255, 0.3);
  /* 半透明背景 */
  backdrop-filter: blur(10px);
  /* 背景模糊效果 */
  -webkit-backdrop-filter: blur(10px);
  /* Safari 兼容性 */

  border: 1px solid;

  position: absolute;
  left: 50%;
  top: 15px;
  transform: translateX(-51%);
}

.zhuanji-info {
  padding: 60px 15px 20px 15px;

  display: flex;
  justify-content: start;

  background-color: rgba(100, 100, 100, 0.3);
  /* 半透明背景 */
  backdrop-filter: blur(10px);
  /* 背景模糊效果 */
  -webkit-backdrop-filter: blur(10px);
  /* Safari 兼容性 */
  color: white;

  position: relative;

  .zhuanjiimg {
    width: 100%;
    height: 100%;
    margin-right: 20px;
  }

  .uesexinxi {
    display: flex;
    align-items: center;

    .touxiangimg {
      width: 30px;
      height: auto;
      border-radius: 15px;
    }
  }
}
</style>
